import React, { Component } from 'react';
import styled from 'styled-components/native';
import {
  addNavigationHelpers, StackNavigator,
  TabNavigator, NavigationActions
} from 'react-navigation';
import { connect } from 'react-redux';
import {
  FontAwesome,
  Foundation,
  Ionicons,
  MaterialIcons
} from '@expo/vector-icons';
import { Keyboard, Platform, BackHandler, StatusBar } from 'react-native';
import { Constants } from 'expo';

import HomeScreen from './screens/HomeScreen';
import MessagesScreen from './screens/MessagesScreen';
import FunctionsScreen from './screens/FunctionsScreen';
import ExploreScreen from './screens/ExploreScreen';
import ProfileScreen from './screens/ProfileScreen';
import NewTweetScreen from './screens/NewTweetScreen';
import LoginScreen from './screens/LoginScreen';
import RegisterScreen from './screens/RegisterScreen';

import { ToolbarButton } from './components/common';
import TabbarItem from './components/TabbarItem';
import { colors, dimens } from './utils/constants';

const TAB_ICON_SIZE = 24;
const HEADER_TITLE_STYLE = {
  alignSelf: 'center',
  fontWeight: 'normal',
};

const Root = styled.View`
  width: 100%;
  flex: 1;
`;

const Tabs = TabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: () => ({
      headerTitle: '微博',
      tabBarIcon: ({ tintColor }) => (
        <TabbarItem title="微博" color={tintColor}>
          <Foundation size={TAB_ICON_SIZE} color={tintColor} name="home" />
        </TabbarItem>
      ),
      headerTitleStyle: {
        alignSelf: 'center'
      },
    })
  },
  Messages: {
    screen: MessagesScreen,
    navigationOptions: () => ({
      tabBarIcon: ({ tintColor }) => (
        <TabbarItem title="消息" color={tintColor}>
          <FontAwesome size={TAB_ICON_SIZE} color={tintColor} name="envelope-o" />
        </TabbarItem>
      )
    })
  },
  Functions: {
    screen: FunctionsScreen,
    navigationOptions: () => ({
      headerTitle: '工具',
      tabBarIcon: () => (
        <TabbarItem onPressed={() => {
          console.log(`打开工具界面`)
        }}>
          <MaterialIcons size={48} color={colors.PRIMARY} name="add-box" />
        </TabbarItem>
      ),
      tabBarOnPress: () => {}
    })
  },
  Explore: {
    screen: ExploreScreen,
    navigationOptions: () => ({
      headerTitle: '发现',
      tabBarIcon: ({ tintColor }) => (
        <TabbarItem title="发现" color={tintColor}>
          <Ionicons size={TAB_ICON_SIZE} color={tintColor} name="ios-search" />
        </TabbarItem>
      )
    })
  },
  Profile: {
    screen: ProfileScreen,
    navigationOptions: () => ({
      headerTitle: '我',
      tabBarIcon: ({ tintColor }) => (
        <TabbarItem title="我" color={tintColor}>
          <FontAwesome size={TAB_ICON_SIZE} color={tintColor} name="user-o" />
        </TabbarItem>
      )
    })
  }
}, {
    lazy: true,
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    tabBarOptions: {
      showIcon: true,
      showLabel: false,
      activeTintColor: colors.TAB_ICON_CHECKED,
      inactiveTintColor: colors.LITE_GRAY,
      style: {
        backgroundColor: colors.WHITE
      },
      indicatorStyle: {
        display: 'none'
      },
      tabStyle: {
        height: dimens.TAB_BAR_SIZE
      },
      iconStyle: {
        width: '100%',
        height: dimens.TAB_BAR_SIZE
      },
      labelStyle: {
        margin: 0,
        marginBottom: Platform.OS === 'ios' ? 5 : 0
      }
    }
  });

const NewTweetModal = StackNavigator(
  {
    NewTweet: {
      screen: NewTweetScreen
    }
  }, {
    headerMode: 'none'
  }
);

const LoginModal = StackNavigator(
  {
    Login: {
      screen: LoginScreen,
      navigationOptions: ({ navigation }) => ({
        headerLeft: (
          <ToolbarButton text="关闭" onPressed={() => {
            Keyboard.dismiss();
            navigation.goBack(null);
          }} />
        ),
        headerRight: (
          <ToolbarButton text="注册" onPressed={() => {
            Keyboard.dismiss();
            navigation.navigate('Register');
          }} />
        )
      })
    }
  }, {
    headerMode: 'none'
  }
);

const RegisterModal = StackNavigator(
  {
    Register: {
      screen: RegisterScreen
    }
  }, {
    headerMode: 'none'
  }
);

const AppMainNav = StackNavigator({
  Home: {
    screen: Tabs,
    navigationOptions: () => ({
      headerStyle: {
        backgroundColor: colors.WHITE,
        marginTop: Platform.OS === 'ios' ? 0 : Constants.statusBarHeight,
        elevation: 1
      },
      headerTitleStyle: HEADER_TITLE_STYLE
    })
  },
  NewTweet: {
    screen: NewTweetModal,
    navigationOptions: () => ({
      headerStyle: {
        backgroundColor: colors.WHITE,
        marginTop: Platform.OS === 'ios' ? 0 : Constants.statusBarHeight,
        elevation: 1
      },
      headerTitleStyle: HEADER_TITLE_STYLE
    })
  },
  Login: {
    screen: LoginModal,
    navigationOptions: () => ({
      headerStyle: {
        backgroundColor: colors.WHITE,
        marginTop: Platform.OS === 'ios' ? 0 : Constants.statusBarHeight,
        elevation: 0
      }
    })
  },
  Register: {
    screen: RegisterModal,
    navigationOptions: () => ({
      headerStyle: {
        backgroundColor: colors.WHITE,
        marginTop: Platform.OS === 'ios' ? 0 : Constants.statusBarHeight,
        elevation: 0
      }
    })
  }
}, {
    initialRouteName: "Home",
    cardStyle: {
      backgroundColor: '#f1f6f7'
    },
    navigationOptions: () => ({
      headerStyle: {
        backgroundColor: colors.WHITE,
        marginTop: Platform.OS === 'ios' ? 0 : Constants.statusBarHeight
      },
      headerTitleStyle: {
        fontWeight: 'bold',
        color: colors.PRIMARY_TEXT
      }
    })
});

class AppNavigation extends Component {

  componentDidMount() {
    BackHandler.addEventListener("hardwareBackPress", this._onBackPressed);
  }

  componentWillUnmount() {
    BackHandler.removeEventListener("hardwareBackPress", this._onBackPressed);
  }

  _onBackPressed = () => {
    const { dispatch, nav } = this.props;
    if (nav.index === 0) {
      return false;
    }
    dispatch(NavigationActions.back());
    return true;
  }

  render() {
    const nav = addNavigationHelpers({
      dispatch: this.props.dispatch,
      state: this.props.nav
    });
    return (
      <Root>
        <StatusBar barStyle={Platform.OS === "ios" ? "dark-content" : "light-content"} />
        <AppMainNav navigation={nav} />
      </Root>
    );
  }
}

export default connect(state => ({
  nav: state.nav,
  user: state.user
}))(AppNavigation);

export const router = AppMainNav.router;
